
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        /* 
    1. URL的一般语法格式为
        protocol://host[:port]/path/[?query]#fragment
        比如：
        http:www.bilibili.com/video/BV1Hb4y1k7Cb?p=4
        组成        说明
        protocol    通信协议常用的 http,ftp,maito 等
        host        主机（域名） www.baidu.com  localhost 
        port        端口号可选，省略时使用方案的默认端口如http的默认端口为80 
        path        一般用来表示主机上的一个目录或文件地址,也可能是虚拟的
        query       参数以键值对的形式，通过&符号分隔开来
        fragment    片段#后面内容常见于链接锚点

    2. DNS 解析
        把 ip 地址转化成 英文字母  

    3. mouseenter mouseover 区别
        两者都是鼠标经过 
        mouseenter  不冒泡  只会经过自身盒子的触发
        mouseover   冒泡    不仅自身盒子触发，而且触发子盒子

    4. offsetLeft(名词解释、由哪些部分组成)
        元素左侧的偏移量
       offsetWidth = width + border +padding

    5. clientWidth = width + padding
       clientTop = border

    6. scrollHeight = height + padding
       scrollTop 返回被卷去的头部的距离，返回数值不带单位

    7. 移动端的事件有哪些：
         touchstart 手指开始触摸屏幕的事件
         touchmove  手指在屏幕上移动的事件
         touchend   手指离开屏幕
    8. 封装动画函数(animate.js)，点击按钮，移动div      
    1-7 题 10分
    8 题 30分
*/
     -->
     <style>
         div{
             position: absolute;
             left:0;
             width: 100px;
             height:100px;
             background-color: skyblue;
         }
     </style>
     <button>点击</button>
<div></div>
     <script>
         
         var btn = document.querySelector('button');
         var div = document.querySelector('div');

         btn.addEventListener('click',function(){
            animate(div,300);
         });

                function animate(obj,target){
                    clearInterval(obj.timer)
                    obj.timer = setInterval(function(){
                         if(obj.offsetLeft >= target){
                            clearInterval(obj.timer);
                 }
                 obj.style.left = obj.offsetLeft + 5 + 'px';
             },30);
         }
        
     </script>
</body>
</html>